import { Component, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core';
import { seriesData } from "../../monitor/turbine-trend/echarts.model";
import { EchartSeriesData } from "../../monitor/turbine-trend/turbine-trend.component";
import { DatePipe } from "@angular/common";
@Component({
  selector: 'app-echarts',
  templateUrl: './echarts.component.html',
  styleUrls: ['./echarts.component.css']
})
export class EchartsComponent implements OnInit, OnChanges {

  /**
   * echarts对象实例
   * 
   * @type {*}
   * @memberof EchartsComponent
   */
  public echarts: any;
  /**
   * 标题
   * 
   * @type {string}
   * @memberof EchartsComponent
   */
  @Input() public title: string;
  /**
   * 子标题
   * 
   * @type {string}
   * @memberof EchartsComponent
   */
  @Input() public subTitle: string;

  @Input() public tooltip: any;
  @Input() public color: string = "#000";
  @Input() max: number;
  @Input() min: number;
  @Input() legendData: string[] = [];
  @Input() seriesData: EchartSeriesData[];
  @Input() xAxisType: string = "category"
  @Input() xData: string[];
  @Input() hasToolbox: boolean = false;
  @Input() isOnlyShowTime: boolean = false;
  /**
   * 图例布局
   * 
   * @type {string}
   * @memberof EchartsComponent
   */
  @Input() public legendOrient: string = "horizontal";
  grid: GridData = {
    left: '40px',
    right: '40px',
    top: "30px",
    bottom: "15%",
    containLabel: true
  };
  public series: seriesData[];
  public options = {
    title: {
      textAlign: 'center',
      text: this.title,
      subtext: this.subTitle,
      textStyle: {
        fontSize: 12,
        fontWeight: 'normal'
      }
    },
    legend: {

    },
    grid: this.grid,
    xAxis: {
      type: "time",
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: this.color,
          type: 'solid',
          width: 1,
          opacity: 0.2
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          opacity: 0.2
        },
      },
      splitNumber: 15,
      axisLabel: {
        show: true,
        rotate: 0,
        margin: 15,
        formatter: (value, index) => {
          return this.datePipe.transform(new Date(value), "MM-dd HH:mm")
        },
        textStyle: {
          color: this.color,
          fontFamily: 'sans-serif',
          fontSize: 12,
          fontStyle: 'italic',
        },
      },
    },
    yAxis: {},
    series: this.series,
    tooltip: this.tooltip,
    //dataZoom: {},
    toolbox: {
      show: this.hasToolbox,
      right: 25,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      },
      iconStyle: {
        normal: {
          color: "#fff",
        }
      }
    },
  };

  constructor(
    private datePipe: DatePipe
  ) { }

  ngOnInit() {
    this.initData()

  }
  ngOnChanges(changes: SimpleChanges): void {
    if (changes["seriesData"] && changes['seriesData'].currentValue) {
      if (this.series && this.series.length) {
        this.seriesData.forEach((v, index) => {
          this.options.series[index].data = v.data
        });
        this.updateEchart()
      }
    }
    if (changes["isOnlyShowTime"] && changes['isOnlyShowTime'].currentValue) {
      if (this.isOnlyShowTime) {
        this.options.xAxis.axisLabel.formatter = (value) => {
          return this.datePipe.transform(new Date(value), "HH:mm:ss")
        };
      }
    }
    if (changes["hasToolbox"] && changes['hasToolbox'].currentValue) {
      this.options.toolbox.show = this.hasToolbox;

      if (this.echarts != null) {
        this.echarts.setOption({ toolbox: this.options.toolbox });
      }
    }
    if (changes["tooltip"] && changes['tooltip'].currentValue) {
      this.options.tooltip = this.tooltip;
      if (this.echarts != null) {
        this.echarts.setOption({ tooltip: this.tooltip });
      }
    }
    if (changes["legendData"] && changes['legendData'].currentValue) {
      let series: seriesData[] = [];
      this.legendData.forEach(v => {
        series.push({
          name: v,
          type: 'line',
          smooth: "none",
          symbol: "none",
          data: [],
        })
      })
      this.series = series;
      this.options.tooltip = this.tooltip;
      this.options.series = this.series;
      if (this.legendOrient == "vertical") {
        this.options.legend = {
          type: "scroll",
          orient: this.legendOrient,
          right: 10,
          inactiveColor: "#eee",
          tooltip: {
            show: true
          },
          data: this.legendData,
          backgroundColor: 'rgba(9,29,69,0.6)',
          textStyle: { color: '#fff', fontSize: 10 },
        }
        this.options.grid.bottom = "5%"
        this.options.grid.right = "15%";
      } else {
        this.options.legend = {
          type: "scroll",
          orient: this.legendOrient,
          bottom: 10,
          inactiveColor: "#333",
          tooltip: {
            show: true
          },
          data: this.legendData,
          backgroundColor: 'rgba(9,29,69,0.6)',
          textStyle: { color: '#fff', fontSize: 10 },
        }
      }
      if (this.echarts != null) {
        this.echarts.setOption(this.options, true);
      };

    }
  }
  initData() {
    this.options.xAxis.axisLabel.textStyle.color = this.color;
    this.options.xAxis.axisLine.lineStyle.color = this.color;
    this.options.title.text = this.title;
    this.options.title.subtext = this.subTitle
    this.options.grid = this.grid;
    let xAxis: XAxisData = {
      type: this.xAxisType,
      boundaryGap: false,
      axisLine: {
        show: true,
        lineStyle: {
          color: this.color,
          type: 'solid',
          width: 1,
          opacity: 0.2
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          opacity: 0.2
        },
      },
      splitNumber: 20,
      axisLabel: {
        show: true,
        rotate: 0,
        margin: 15,
        formatter: '{value}',
        textStyle: {
          color: this.color,
          fontFamily: 'sans-serif',
          fontSize: 12,
          fontStyle: 'italic',
        },
      },
    }
    if (this.xAxisType == "category") {
      xAxis.data = this.xData;
    }
    let yAxis: yAxisData = {
      trigger: 'axis',
      type: "value",
      splitNumber: 10,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#35789d',
          width: 1,
          opacity: 0.2
        }
      },
      splitLine: {
        lineStyle: {
          opacity: 0.2
        }
      },
      axisLabel: {
        show: true,
        margin: 18,
        formatter: '{value} ',
        textStyle: {
          color: '#35789d',
          fontFamily: 'verdana',
          fontSize: 12,
          fontStyle: 'normal',
          fontWeight: 'bold'
        }
      },
    };
    if (this.max) {
      yAxis.max = this.max;
      yAxis.min = this.min;
    }
    this.options.yAxis = yAxis;
    if (this.echarts != null) {
      this.echarts.setOption(this.options, true);
    };

  }
  public onChartInit(echartsInstance: any) {
    this.echarts = echartsInstance;
  }
  public updateEchart() {

    if (this.echarts != null) {
      this.echarts.setOption({ series: this.series });
    };
  }

}
interface XAxisData {
  type: string;
  data?: string[];
  splitNumber?: number;
  splitLine?: object;
  axisLine?: object;
  axisLabel?: object;
  boundaryGap?: boolean;
  max?: number;
  min?: number;
  name?: string;
}
interface yAxisData {
  trigger: string;
  type: string;
  splitNumber?: number;
  splitLine?: object;
  axisLine?: object;
  axisLabel?: object;
  boundaryGap?: boolean;
  max?: number;
  min?: number;
  name?: string;
}
interface GridData {
  left: string,
  right: string,
  top: string,
  bottom: string,
  containLabel: boolean
}



// WEBPACK FOOTER //
// ./src/app/module/common/echarts/echarts.component.ts